<template>
	<view class="tab-container">
		<!-- 统计卡片区域 - 白色背景+竖线间隔 -->
		<view class="stats-container">
			<view class="tab-wrapper">
				<!-- 三个标签 -->
				<view class="tab-item active">
					<text class="tab-text">沟通统计</text>
				</view>
				<view class="time_box">
					最近30天
				</view>
			</view>
			<view class="stats-grid">
				<!-- 第一行统计项 -->
				<view class="stats-row">
					<view class="stats-item" v-for="(item, index) in firstRowStats" :key="index">
						<view class="stats-value">{{ item.value }}</view>
						<view class="stats-label">{{ item.label }}</view>
						<!-- 最后一项不加竖线 -->
						<view class="divider" v-if="index !== firstRowStats.length - 1"></view>
					</view>
				</view>
			</view>
			<chart7></chart7>
		</view>

		<view class="stats-container">
			<view class="tab-wrapper">
				<!-- 三个标签 -->
				<view class="tab-item active">
					<text class="tab-text">群聊统计</text>
				</view>
				<view class="time_box">
					最近30天
				</view>
			</view>
			<view class="stats-grid">
				<!-- 第一行统计项 -->
				<view class="stats-row">
					<view class="stats-item" v-for="(item, index) in secondRowStats" :key="index">
						<view class="stats-value">{{ item.value }}</view>
						<view class="stats-label">{{ item.label }}</view>
						<!-- 最后一项不加竖线 -->
						<view class="divider" v-if="index !== secondRowStats.length - 1"></view>
					</view>
				</view>
			</view>
			<chart8></chart8>

		</view>
	</view>
</template>

<script>
	import chart7 from './chart7.vue';
	import chart8 from './chart8.vue';
	export default {
		components: {
			chart7,
			chart8
		},
		data() {
			return {


				// 第一行统计数据
				firstRowStats: [{
						label: '总数量',
						value: 44
					},
					{
						label: '发送数量',
						value: 205
					},
					{
						label: '平均首次回复时长',
						value: 5
					},
					{
						label: '回复率',
						value: '50.3%'
					}
				],

				// 第二行统计数据
				secondRowStats: [{
						label: '群聊总数',
						value: '4个'
					}, // 对应"4个 群聊总数"
					{
						label: '群内客户数',
						value: '10位'
					}, // 对应"10位 群内客户数"
					{
						label: '入群人数',
						value: '17位'
					}, // 对应"17位 入群人数"
					{
						label: '退群人数',
						value: '8位'
					}, // 对应"8位 退群人数"
					{
						label: '活跃人数',
						value: '5位'
					} // 对应"5位 活跃人数"
				]
			};
		},
		methods: {

		}
	};
</script>

<style scoped>
	/* 统计容器 - 白色背景 */
	.stats-container {
		background-color: #fff;
		/* border-radius: 16rpx; */
		padding: 30rpx 0;
		margin-bottom: 24rpx;
	}

	/* 统计网格布局 */
	.stats-grid {
		width: 95%;
		margin: 0 auto;
	}

	/* 行容器 */
	.stats-row {
		display: flex;
		width: 100%;
		/* 行之间的间距 */
		padding: 15rpx 0;
	}

	/* 统计项 */
	.stats-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 10rpx 0;
	}

	/* 数值样式 */
	.stats-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	/* 标签样式 */
	.stats-label {
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	/* 竖线间隔 */
	.divider {
		position: absolute;
		right: 0;
		top: 15%;
		height: 70%;
		width: 1px;
		background-color: #e5e5e5;
		/* 淡灰色竖线 */
	}

	/* 修复u-tabs底部线条样式 */
	::v-deep .u-tabs__line {
		background-color: #3589e7 !important;
		height: 6rpx !important;
	}


	.tab-wrapper {
		background-color: #fff;
		display: flex;
		/* height: 90rpx; */
		margin-bottom: 24rpx;
		padding: 0 24rpx;
	}

	.tab-item {
		flex: 1;
		/* width: 25%; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		cursor: pointer;
	}

	/* 左侧边框样式 */
	.left-border {
		position: absolute;
		left: 0;
		top: 28rpx;
		bottom: 28rpx;
		width: 4rpx;
		background-color: #919191;
		/* 默认透明 */
		transition: background-color 0.3s ease;
	}

	/* 选中时的左侧蓝色边框 */
	.active-border {
		background-color: #3589e7;
		/* 蓝色边框 */
	}

	.tab-text {
		font-size: 28rpx;
		color: #666;
		transition: color 0.3s ease;
		padding-left: 16rpx;
		position: relative;
	}

	.tab-text::before {
		content: '';
		/* 伪元素必须设置content属性，空字符串即可 */
		position: absolute;
		/* 绝对定位，相对于父元素（.tab-text） */
		left: 0;
		/* 定位到左侧 */
		top: 0;
		/* 顶部对齐 */
		height: 100%;
		/* 高度与父元素一致 */
		width: 2px;
		/* 边框宽度 */
		background-color: #3589e7;
		/* 边框颜色，可根据需要修改 */
	}

	/* 选中状态样式 */
	.active .tab-text {
		color: #3589e7;
		/* 蓝色文字 */
		font-weight: 500;
	}


	.time_box {
		color: #3589e7;
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
</style>